<template>
        <div class="container">
          <div class="title">请完善信息</div>
          <div class="tips">如实填写信息，通过企业认证将获取更优质的功能和服务</div>
          <div class="line"></div>
          <div class="frombox">
            <div class="logo-nane">
              <div id="headImg">
                <div id="myPhoto">
                  <div class="viewPhoto" @click="monidianji">
                    <!-- <i class="el-icon-plus"></i> -->
                    <img
                      :src="imageSave"
                      alt=""
                      id="portrait"
                      style="width: 350px;height: 250px"
                    />
                  </div>
                  <div class="listBox">
                    <input type="file" id="saveImage" name="myphoto" />
                  </div>
                  <div class="save">
                    <!-- <el-button type="danger" size="small" @click="imageSubmit"
                                      >上传头像</el-button
                                    > -->
                    <div style="margin-bottom:70px;padding-top: 30px">
                      <span>{{ uploadDate }}</span>
                    </div>
                  </div>
                </div>
                <i class="el-icon-t" @click="monidianji">上传logo</i>
              </div>
              <div class="inp-3">
                <div class="company-name">
                  <span>* <font>公司名称:</font> </span>
                  <input type="text" class="int1" />
                </div>
                <div class="company-nature">
                  <span> 公司性质: </span>
                  <select class="select2_test">
                    <option>请选择</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                </div>
                <div class="company-industry">
                  <span> 公司行业: </span>
                  <select class="select2_test">
                    <option>请选择</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                </div>
              </div>
              <div class="company-address">
                <span>* <font>公司所在地:</font> </span>
                <select class="select2_test">
                  <option>请选择</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
                <select class="select2_test">
                  <option>请选择</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
                <input class="select3_test" />
                <div class="pic">
                  <img src="../../assets/Verification/cls.png" alt="" />
                </div>
              </div>
              <div class="company-zz">
                <span>* <font>营业执照:</font> </span>
                <div class="file-box">
                  <input type="file" class="file-btn" />
                  上传
                </div>
                <p>注：图片格式为 JPG/JPEG/PNG/PDF 大小在2MB内</p>
              </div>
              <div class="xydm">
                <span>* <font> 社会信用代码 :</font> </span>
                <input type="text" class="int1" />
              </div>
              <div class="name-fr">
                <span>* <font> 法人姓名 :</font> </span>
                <input type="text" class="int1" />
              </div>
              <div class="name-fr-zh">
                <span>* <font> 法人身份证号 :</font> </span>
                <input type="text" class="int1" />
              </div>
              <div class="name-fr-zh-a">
                <span> <font> 对公银行账号:</font> </span>
                <input type="text" class="int1" />
              </div>
              <div class="name-fr-zh-b">
                <span> <font> 对公开户行： :</font> </span>
                <input type="text" class="int1" />
              </div>
            </div>
            <div class="sub">
              <div class="submit">提交</div>
              <div class="resubmit">取消</div>
            </div>
          </div>
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
              imageSave: '', //图片路径
              uploadDate: '' //上传时间
            }
          },
          methods: {
            //图片库模拟点击input file
            monidianji() {
              document.getElementById('saveImage').click()
            },
            yulan() {
              document.getElementById('saveImage').onchange = function() {
                var imgFile = this.files[0]
                var fr = new FileReader()
                fr.onload = function() {
                  document.getElementById('portrait').src = fr.result
                }
                fr.readAsDataURL(imgFile)
              }
            },
            //上传
            imageSubmit() {
              let _this = this
              let x = document.getElementById('saveImage').files[0]
              let params = new FormData() //创建一个form对象
              params.append('file', x, x.name) //append 向form表单添加数据
              //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
              let config = { headers: { 'Content-Type': 'multipart/form-data' } }
              //发起ajax请求存放在服务端
              this.$axios
                .post(api.personHeadImg, params, config)
                .then(function(res) {
                  _this.imageSave = res.data.lujing
                  let mydate = new Date()
                  _this.uploadDate = '上传时间：' + mydate.toLocaleString()
                  _this.$notify({
                    type: 'success',
                    message: '上传成功!',
                    offset: 160
                  })
                })
                .catch(function(error) {
                  console.log(error)
                  _this.$notify({
                    type: 'warning',
                    message: '上传失败!',
                    offset: 160
                  })
                })
            }
          },
          mounted() {
            this.yulan() //预览图片
          }
        }
      </script>
      <style lang="less" scoped>
        .container {
          width: 1320px;
          margin: auto;
          height: 1080px;
          background-color: #ccc;
          opacity: 0.8;
          .title {
            margin: auto;
            padding-top: 51px;
            width: 126px;
            height: 24px;
            font-size: 25px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(102, 102, 102, 1);
            line-height: 26px;
          }
          .tips {
            margin: auto;
            margin-top: 29px;
            width: 534px;
            height: 21px;
            font-size: 21px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(102, 102, 102, 1);
            line-height: 26px;
          }
          .line {
            margin-top: 35px;
            width: 1320px;
            border: 1px dashed rgba(191, 191, 191);
          }
          .logo-nane {
            height: 250px;
            width: 1320px;
            .inp-3 {
              width: 450px;
              height: 250px;
              position: relative;
              left: 763px;
              top: -103px;
              .company-name {
                position: absolute;
                top: 28px;
                width: 450px;
                height: 45px;
                span {
                  width: 89px;
                  height: 17px;
                  font-size: 18px;
                  font-family: Adobe Heiti Std;
                  font-weight: normal;
                  color: rgba(255, 0, 0, 1);
                  line-height: 26px;
                  font {
                    color: #666;
                    font-weight: normal;
                  }
                }
                .int1 {
                  width: 320px;
                  height: 45px;
                  background: rgba(255, 255, 255, 1);
                  border: 1px solid rgba(221, 221, 221, 1);
                  border-radius: 2px;
                  margin-left: 10px;
                }
              }
              .company-nature {
                position: absolute;
                top: 111px;
                left: 13px;
                width: 450px;
                height: 45px;
                span {
                  width: 89px;
                  height: 17px;
                  font-size: 18px;
                  font-family: Adobe Heiti Std;
                  font-weight: normal;
                  color: #666;
                  line-height: 26px;
                }
                .select2_test {
                  margin-left: 6px;
                  width: 320px;
                  height: 45px;
                  background: rgba(255, 255, 255, 1);
                  border: 1px solid rgba(221, 221, 221, 1);
                  border-radius: 2px;
                  option {
                    width: 320px;
                    height: 45px;
                  }
                }
              }
              .company-industry {
                position: absolute;
                top: 193px;
                left: 13px;
                width: 450px;
                height: 45px;
                span {
                  width: 89px;
                  height: 17px;
                  font-size: 18px;
                  font-family: Adobe Heiti Std;
                  font-weight: normal;
                  color: #666;
                  line-height: 26px;
                }
                .select2_test {
                  margin-left: 6px;
                  width: 320px;
                  height: 45px;
                  background: rgba(255, 255, 255, 1);
                  border: 1px solid rgba(221, 221, 221, 1);
                  border-radius: 2px;
                  option {
                    width: 320px;
                    height: 45px;
                  }
                }
              }
            }
            .company-address {
              position: absolute;
              top: 528px;
              margin-left: 33px;
              width: 450px;
              height: 45px;
              span {
                width: 89px;
                height: 17px;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(255, 0, 0, 1);
                line-height: 26px;
                font {
                  color: #666;
                  font-weight: normal;
                }
              }
              .select2_test {
                margin-left: 6px;
                width: 140px;
                height: 45px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
                border-radius: 2px;
                option {
                  width: 320px;
                  height: 45px;
                }
              }
              .select3_test {
                position: relative;
                margin-left: 406px;
                top: -44px;
                width: 743px;
                height: 40px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
                border-radius: 2px;
              }
            }
            .company-zz {
              position: absolute;
              top: 628px;
              margin-left: 37px;
              width: 450px;
              height: 45px;
              span {
                width: 109px;
                height: 17px;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(255, 0, 0, 1);
                line-height: 26px;
                font {
                  color: #666;
                  font-weight: normal;
                }
              }
              .file-box {
                display: inline-block;
                position: relative;
                left: 20px;
                text-align: center;
                width: 81px;
                line-height: 45px;
                height: 45px;
                padding: 3px 5px;
                /* overflow: hidden; */
                color: #fff;
                background-color: #58a3f7;
              }
      
              .file-btn {
                position: absolute;
                width: 81px;
                height: 45px;
                top: 0;
                left: 20px;
                outline: none;
                background-color: transparent;
                filter: alpha(opacity=0);
                -moz-opacity: 0;
                -khtml-opacity: 0;
                opacity: 0;
              }
              p {
                color: #ff0000;
                margin-left: 100px;
                width: 400px;
              }
            }
            .xydm {
              position: absolute;
              top: 638px;
              margin-left: 720px;
              width: 477px;
              height: 45px;
              span {
                width: 89px;
                height: 17px;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(255, 0, 0, 1);
                line-height: 26px;
                font {
                  color: #666;
                  font-weight: normal;
                }
              }
              .int1 {
                width: 320px;
                height: 45px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
                border-radius: 2px;
                margin-left: 10px;
              }
            }
            .name-fr {
              position: absolute;
              top: 750px;
              margin-left: 43px;
              width: 477px;
              height: 45px;
              span {
                width: 89px;
                height: 17px;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(255, 0, 0, 1);
                line-height: 26px;
                font {
                  color: #666;
                  font-weight: normal;
                }
              }
              .int1 {
                width: 320px;
                height: 45px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
                border-radius: 2px;
                margin-left: 10px;
              }
            }
            .name-fr-zh {
              position: absolute;
              top: 750px;
              margin-left: 720px;
              width: 477px;
              height: 45px;
              span {
                width: 89px;
                height: 17px;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(255, 0, 0, 1);
                line-height: 26px;
                font {
                  color: #666;
                  font-weight: normal;
                }
              }
              .int1 {
                width: 320px;
                height: 45px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
                border-radius: 2px;
                margin-left: 10px;
              }
            }
            .name-fr-zh-a {
              position: absolute;
              margin-left: 25px;
              top: 858px;
              width: 477px;
              height: 45px;
              span {
                width: 89px;
                height: 17px;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(255, 0, 0, 1);
                line-height: 26px;
                font {
                  color: #666;
                  font-weight: normal;
                }
              }
              .int1 {
                width: 320px;
                height: 45px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
                border-radius: 2px;
                margin-left: 10px;
              }
            }
            .name-fr-zh-b {
              position: absolute;
              top: 858px;
              margin-left: 734px;
              width: 477px;
              height: 45px;
              span {
                width: 89px;
                height: 17px;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(255, 0, 0, 1);
                line-height: 26px;
                font {
                  color: #666;
                  font-weight: normal;
                }
              }
              .int1 {
                width: 320px;
                height: 45px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
                border-radius: 2px;
                margin-left: 10px;
              }
            }
          }
          .sub {
            margin-top: 40px;
            margin-left: 550px;
            font-size: 18px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            cursor: pointer;
            .submit {
              float: left;
              margin-left: -100px;
              width: 180px;
              height: 50px;
              line-height: 50px;
              margin-top: 500px;
              background: rgba(88, 163, 247, 1);
              border-radius: 2px;
            }
            .resubmit {
              float: left;
              margin-top: 500px;
              margin-left: 50px;
              width: 180px;
              line-height: 50px;
              height: 50px;
              background: rgba(88, 163, 247, 1);
              border-radius: 2px;
            }
          }
          .pic {
            position: relative;
            width: 87px;
            height: 87px;
            left: 523px;
            top: -110px;
            img {
              display: inline-block;
              border: 1px dashed #000;
            }
          }
          #headImg {
            margin-left: 50px;
            .viewPhoto {
              border: 1px rgba(99, 199, 210, 0.79) dashed;
              width: 350px;
              height: 250px;
              background-image: url(../../assets/Verification/u3374.png);
              background-repeat: no-repeat;
              background-position: center;
            }
            #saveImage {
              display: none;
            }
      
            .save {
              margin: 30px auto;
            }
            .viewPhoto {
              position: relative;
              float: left;
              margin-right: 10%;
            }
            .el-icon-t {
              font-size: 19px;
              color: rgba(88, 163, 247, 1);
              position: absolute;
              margin-left: -296px;
              margin-top: 185px;
              /* left: 24%; */
              /* top: 54%; */
              transform: translate(-50%, -50%);
              max-width: 50%;
              text-align: center;
              font-weight: normal;
              cursor: pointer;
            }
          }
        }
      </style>
      